<template>
    <el-container style="text-align: right; font-size: 12px">
        <!--********** 头部 -->
        <el-header style="height:auto"
                   :class="addpadding">
            <e-header></e-header>
        </el-header>
        <!--********** 主体 -->
        <el-main style="height:auto"
                 :class="bacColor">
            <div class="mo_login">
                <div class="addbreadcrumb">
                    <el-breadcrumb separator-class="el-icon-arrow-right">
                        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
                        <!-- <el-breadcrumb-item :to="{path:'/PostMessage'}">发布文章</el-breadcrumb-item> -->
                        <el-breadcrumb-item>充值页面</el-breadcrumb-item>
                    </el-breadcrumb>
                </div>

                <div class="search-all">
                    <div class="search-money">
                        <p>请输入金额：</p>
                    </div>

                    <el-input class="search-input"
                              v-model="moneyinput"
                              ref='ele'
                              oninput="value=value.replace(/[^\d]/g,'')"
                              :minlength="1"
                              :maxLength='5'
                              placeholder="请输入充值金额"
                              clearable>
                    </el-input>

                    <!-- <el-input class="search-input"
                              placeholder="请输入内容"
                              v-model="moneyinput"
                              clearable>
                    </el-input> -->

                    <el-button class="search-button"
                               type="primary"
                               @click="sendMoney(moneyinput)">充值</el-button>

                </div>
                <div class="periphery">

                    <div class="login_cont"
                         v-loading="loading"
                         element-loading-text="拼命加载中"
                         element-loading-spinner="el-icon-loading"
                         element-loading-background="#333333">

                        <div class="login_addtitle">
                            <p>请用微信扫一扫充值</p>
                        </div>
                        <!-- *********** -->
                        <el-form status-icon
                                 ref="ruleForm"
                                 label-width="30px">

                            <div class="con_img">
                                <el-image v-if="moneyStatus==false"
                                          style="width: 200px; height: 200px"
                                          :src="topimgsrc"
                                          fit="fill"></el-image>

                                <canvas id="canvas"
                                        style="width: 200px; height: 200px"></canvas>

                            </div>
                            <!-- <div class="addcard">
                                <p>银行卡号:6222 6205 9000 7207 966</p>
                            </div>
                            <div class="announcements">
                                <p>1、精推热点信息每条10元/月,广告特推每条15元/月,头条信息50元/月;</p>
                                <p>2、信息真实保证金100元，可以退还;</p>
                                <p>3、请银行卡转账或者扫码支付;</p>
                                <p>4、联系网站客服：18487351868</p>
                                <p>5、权限开通后请返回发布页重新发布。</p>
                            </div> -->
                            <div class="addline"> </div>
                            <el-form-item>
                                <el-button type="primary"
                                           @click="submitForm()">支付成功将返回余额页</el-button>
                            </el-form-item>

                        </el-form>

                    </div>
                </div>
            </div>
        </el-main>
        <!--********** 底部 -->
        <el-footer style="height:auto">
            <e-footer></e-footer>
        </el-footer>
    </el-container>
</template>
<script>
import eHeader from "@/components/public/Header.vue";
import eFooter from "@/components/public/Footer.vue";
import { throttle } from "../../ElementUI/public.js";
import QRCode from 'qrcode'
export default {
    components: {
        eHeader,
        eFooter
    },
    data() {
        return {
            labelPosition: "top",
            topimgsrc: require("../../assets/images/erweima.png"),
            checked: false,
            height: "",
            addpadding: "addpadding",
            bacColor: "#F0FFFE",
            loading: false,
            moneyinput: "",
            orderNumber: 0,//订单号
            moneyStatus: false,
        };
    },
    computed: {
    },
    created() {
        let getColor = localStorage.getItem('background-color')
        let Colorarr = getColor.slice(1, 7)
        this.bacColor = Colorarr
        this.userName = localStorage.getItem('accessName')
        this.userId = localStorage.getItem('accessId')
    },
    mounted() {
        this.timer = setInterval(this.orderStatus, 2000);
        this.$bus.$on('changeColor', (e) => {
            this.addpadding = "addpadding";
            if (this.bacColor != e) {
                let Colorarr = e.slice(1, 7)
                this.bacColor = Colorarr
            }
        })
    },
    methods: {
        //输入金额框
        sendMoney: throttle(function (name) {
            let _this = this;
            if (name != "") {
                this.askQRcode()
            }
            else {
                this.showError("error", "请输入充值金额！");
            }
        }, 1000),
        //输入金额请求二维码
        askQRcode() {
            let _this = this;
            _this.orderNumber = _this.userId + new Date().getTime()
            let Params = {
                //userName: _this.userName,
                ordernumber: _this.orderNumber,
                //money: _this.moneyinput,
                money: 0.01,
                m_id: _this.userId,
            };
            _this.$https.fetchPost("/codeurl", Params).then(res => {
                let resdata = res.data;
                switch (resdata.code) {
                    case 1000:
                        let adddata = resdata.data
                        _this.topimgsrc = resdata.data
                        _this.moneyStatus = true
                        this.useqrcode(resdata.data)
                        break;
                    case 1002:
                        _this.loading = false

                        _this.showError("error", resdata.msg + "，请重新输入");
                        sessionStorage.clear();
                        //清空Cookie
                        break;
                    case 1003:
                        _this.loading = false
                        _this.showError("error", resdata.msg + "，请重新输入");
                        sessionStorage.clear();
                        //清空Cookie
                        break
                }
            });
        },
        //订单状态接口
        orderStatus() {
            let _this = this;
            //_this.orderNumber = _this.userId + new Date().getTime()
            if (_this.moneyStatus == true) {
                let Url = "orderstatus?order_number=" + _this.orderNumber
                //let Url = "orderstatus?order_number=271590480080852" 
                let Params = {};
                this.$https.fetchGet(Url, Params).then(res => {
                    let resdata = res.data;
                    switch (resdata.code) {
                        case 1000:
                            let adddata = resdata.data
                            if (resdata.data.trade_state_desc == "支付成功") {
                                // _this.$alert(resdata.data.trade_state_desc + "!请返回余额界面查看余额", {
                                //     showConfirmButton: true,
                                //     callback: action => {
                                //         this.submitForm()
                                //     }
                                // });
                                this.timer2 = setInterval(this.submitForm(), 5000);
                                this.timer3 = setInterval(_this.showError("success", resdata.data.trade_state_desc), 2000);
                                //_this.showError("success", resdata.data.trade_state_desc);
                                clearInterval(this.timer);
                                clearInterval(this.timer2);
                                clearInterval(this.timer3);
                            }
                            else {
                            }
                            break;
                        case 1002:
                            console.log(resdata.msg)
                            break
                    }

                });
            }
        },
        //二维码生成器
        useqrcode(url) {
            var canvas = document.getElementById('canvas');
            //域名例：https://www.baidu.com，拼装url参数
            //{ margin: 1 }设置二维码的白边为1
            //this.userinfo.user_id--是自己的唯一ID
            // var url = '你的域名' + "?pid_id=" + this.userinfo.user_id;
            // var url = '你的域名' + "?pid_id=" + this.userinfo.user_id;
            // var url = '你的域名' + "?pid_id=" + this.userinfo.user_id;
            var url = url;
            QRCode.toCanvas(canvas, url, { width: 200, height: 200, margin: 1 }, function (error) {
                if (error) console.error(error)
                //console.log('QRCode success!');
            })
        },
        //跳转余额页
        submitForm() {
            this.$router.push("/Balance");
        },
        //消息提示
        showError(type, status) {
            this.$message({
                type: type,
                showClose: true,
                center: true,
                message: status
            });
        },

    },
    beforeDestroy() {
        clearInterval(this.timer);
        clearInterval(this.timer2);
        clearInterval(this.timer3);
    }
};
</script>
<style lang="scss"  scoped>
.el-container {
    overflow: hidden;
}
.el-main {
    overflow: hidden;
    padding: 0;
}

$font-color: #fff;
$bg-color: rgba(46, 139, 87, 0.4);
$btn-color: #409eff;
$shadow-color: 3px 7px 50px -12px rgba(64, 158, 255, 0.4);
@mixin bubbleAnimation($send1, $send2) {
    animation: bubble $send1 linear infinite,
        direction $send2 ease-in-out infinite alternate;
}
.mo_login {
    position: relative;
    max-width: 1200px;
    width: 100%;
    min-width: 1000px;
    margin: 0 auto;
    margin-top: 25px;
    margin-bottom: 20px;

    padding: 0 10px 20px 10px;
    height: 645px;
    overflow: hidden;
    background: #fbfbfb;
    background-position: left top;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    &:before {
        content: '';
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        //background-image: linear-gradient(-225deg, #7de2fc 0%, #b9b6e5 100%);
        z-index: -1;
    }
    .addbreadcrumb {
        width: 100%;
        height: 40px;
        font-size: 14px;
        padding-top: 13px;
        padding-left: 22px;
    }
    .search-all {
        width: 100%;
        height: 40px;
        float: left;
        margin-top: 14px;
        margin-left: 30%;
        margin-bottom: 14px;
        .search-money {
            width: 10%;
            height: 100%;
            float: left;
            font-size: 16px;
            line-height: 40px;
        }
        .search-input {
            width: 20%;
            height: 40px;
            float: left;
            margin-right: 4px;
            border: 1px solid #dfc2bf;
        }
        .el-input-group__append,
        .el-input-group__prepend {
            background-color: #ffffff;
            color: #909399;
            vertical-align: middle;
            display: table-cell;
            position: relative;
            border: none;

            border-radius: 4px;
            padding: 0 20px;
            width: 1px;
            white-space: nowrap;
        }
        .search-button {
            width: 78px;
            height: 42px;
            background: #558ffb;
            border: none;
            border-left: 1px solid #dfc2bf;
            border-radius: 3px;
            float: left;
            color: #ffffff;
        }
    }
    .periphery {
        width: 100%;
        height: 635px;
        padding-top: 62px;
        background: #ffffff;
        float: left;

        .login_cont {
            margin: 0 auto;
            padding: 36px 25px 28px 45px;
            width: 380px;
            height: 360px;
            border-radius: 8px;
            background: #ffffff;
            //box-shadow: $shadow-color;

            .login_addtitle {
                width: 100%;
                height: 30px;
                font-size: 20px;
                color: #333333;
                margin-bottom: 25px;
                text-align: center;
                float: left;
            }
            .login_addtitle p {
                letter-spacing: 10px;
            }
            .el-form {
                .el-form-item__label {
                    color: $btn-color;
                }
                .login_sub {
                    text-align: center;
                }
                .el-button {
                    width: 100%;
                    font-size: 14px;
                }
            }
        }
        .con_img {
            width: 200px;
            height: 200px;
            margin: 0 auto;
            overflow: hidden;
            #canvas {
                width: 150px;
                height: 150px;
            }
        }

        .addline {
            width: 100%;
            height: 15px;
        }
        .addcard {
            text-align: center;
            font-size: 16px;
        }
        .announcements {
            width: 100%;
            height: auto;
            margin: 20px 0;
            text-align: left;
            padding-left: 25px;
            font-size: 16px;
            font-weight: 600px;
        }
    }
}

.mo_login /deep/ .el-input__inner {
    width: 100%;
    height: 38px;
    border: none;
}

.location-right {
    margin-left: 25%;
    width: 50%;
    float: left;
    text-align: center;
    color: #ffffff;
    font-size: 12px;
}
.el-form-item {
    margin-right: 25px;
    margin-left: -5px;
}

.addcolor {
    color: #558ffb;
}
.addcolor:hover {
    color: #558ffb;
}
.addpadding {
    padding: 0;
}
.DAEBFF {
    background: #daebff;
}
.F5F5FD {
    background: #f5f5fd;
}
.F0FFFE {
    background: #f0fffe;
}
</style>